<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>CMS系统-公告类型管理</title>

	<!-- 引入样式 -->
	<link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
	<link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}">
	<link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}">
	<link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
	<!-- 引入组件库 -->
	<script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
	<script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
	<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
	<script src="../../../../static/js/jquery.nestable.js" th:src="@{/js/jquery.nestable.js}"></script>
</head>
<body>
<div id="app">
	<div class="main-content" v-cloak>
			<div class="page-header">
					<h1 class="page-title">公告类型管理</h1>
					<!--<div class="z-pop_question">
						<el-popover
								ref="popoverq"
								placement="bottom-start"
								width="400"
								trigger="hover">
							<p class="z-jiao">角色权限：每个角色可以设置不同的后台功能权限，比如：
								业务员角色，仓库管理员角色，财务角色。然后账号关联
								某个角色，就拥有该角色下的所有功能权限。
								<a href="javascript:;">查看更多帮助</a>
							</p>
						</el-popover>

						<i v-popover:popoverq class="el-icon-question"></i>
					</div>-->
				<div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>内容<span>/</span>公告管理</div>
			</div>

				<div class="list-content">
					<!--条件筛选-->
					<div class="content_item_filter clearfix">
						<!--<div class="input-select fl btn-radid_none">
							<el-input placeholder="请输入内容" v-model="input4" class="minW40 z_input-holder" >
								<el-button slot="append" icon="el-icon-search"></el-button>
							</el-input>
						</div>-->
						<div class="filter-btn fr">
							<el-button type="primary" @click="showDailog()">新增公告类型</el-button>
						</div>
					</div>

					<!--主体表格-->
					<div class="z-tables">
						<el-table ref="multipleTable" :data="noticeTypeList" style="width: 100%;" @selection-change="handleSelectionChange">
						    <el-table-column type="selection" width="55"></el-table-column>
							<el-table-column prop="typeName" label="类型名称" min-width="400"></el-table-column>
							<el-table-column prop="sortValue" label="排序" min-width="400"></el-table-column>
							<el-table-column fixed="right" prop="" label="操作" min-width="100"  class-name="table-operate-td">
								<template slot-scope="scope">
								    <el-button type="text" @click="editDailog(scope.row.uuid,scope.row.typeName,scope.row.sortValue)">编辑</el-button>
									<span class="table-spea-line">|</span>
									<el-button type="text" @click="handleDelete(scope.$position, scope.row)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
					
				  <!--批量操作-->
				   <div class="grid-content">
					<div class="bg-purple-left">
						<el-checkbox v-model="tableAllCheck" @change="tableAllCheckFn(noticeTypeList)"></el-checkbox>
					<el-dropdown @command="handleCommand" placement="top">
						<div class="el-input el-input--suffix">
							<input type="text" value="批量操作" readonly="readonly" class="el-input__inner">
							<span class="el-input__suffix">
								<span class="el-input__suffix-inner"><i class="el-select__caret el-input__icon el-icon-arrow-up"></i></span>
							</span>
						</div>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="b">批量删除</el-dropdown-item>
						</el-dropdown-menu>
					   </el-dropdown>
					</div>

					<!--分页-->
					<div class="bg-purple-light">
						<el-pagination
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="currentPage"
								:page-sizes="pageSizeList"
								:page-size="pageSize"
								layout="total, sizes, prev, pager, next"
								:total="totalNum">
						</el-pagination>
					</div>
				</div>

				<!-- 新增公告类型模态框 -->
				<el-dialog title="新增/编辑公告类型" :visible.sync="dialogFormVisible"  @close='closeDialog'>
					<el-form  ref="noticetype-form" :model="noticeType" :rules="rules" label-width="80px" class="demo-ruleForm">

						<el-form-item hidden label="ID" prop="uuid">
							<el-input v-model="noticeType.uuid"></el-input>
						</el-form-item>

						<el-form-item label="类型名称" prop="typeName">
							<el-input v-model="noticeType.typeName" ></el-input>
						</el-form-item>

						<el-form-item label="排序" prop="sortValue">
							<el-input v-model="noticeType.sortValue" ></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer"  id="addDialog" >
						<el-button type="primary"  @click="saveNoticeType">确 定</el-button>
						<el-button @click="dialogFormVisible = false">取 消</el-button>
					</div>
					<div slot="footer" class="dialog-footer"  id="editDialog" >
						<el-button type="primary"  @click="updateNoticeType">确 定</el-button>
						<el-button @click="dialogFormVisible = false">取 消</el-button>
					</div>
				</el-dialog>
				<!-- 新增公告类型模态框 end -->
	    </div>
    </div>
  </div>
<script th:inline="javascript">
    new Vue({
        el: "#app",
        data: {
        	multipleSelection: [],
        	tableAllCheck: false,  // table 下方批量操作全选
            noticeTypeList: [],
			noticeType:{
                uuid:'',
				typeName:'',
				sortValue:''
			},
            rules: {
                typeName: [
                    {required: true, message: "请输入公告类型名称", trigger: 'blur'},
                    {min:4, max:20, message: '公告类型名称长度4到20个字符', trigger: 'blur'},
                ],
                sortValue: [
                    {required: true, message: "请输入排序", trigger: 'blur'},
                ]
            },
            showChoice: false,
            conditions: {
                "typeName": {
                    "operation": "LIKE",
                    "value": ""
                },
                "sortValue": {
                    "operation": "EQ",
                    "value": ""
                },
            },
            pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,

            act: 0, //tab选项

            isLeft: false, //左右阴影
            isRight: false,

            tableData: [],
            dialogFormVisible: false,
        },
        created: function() {
            var self = this;
            var queryMessage = {
                "queryPage": self.currentPage,
                "pageShow": self.pageSize,
                "queryParams": self.conditions,
                "sortMap": {
                    "uuid": "desc"
                }
            };
            $.ajax({
                url: "/backstage/cms/noticetype/list",
                type: "POST",
                data: JSON.stringify(queryMessage),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function(data) {
                    if (data && data.returnCode == "1") {
                        self.noticeTypeList = data.returnMessage;
                        self.totalNum = data.pager.totalNum;
                    }
                }
            });
        },
        methods: {
        	 // 表格选中项变化事件
		    handleSelectionChange(val) {
		        this.multipleSelection = val;
		    },
		    tableAllCheckFn(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row, this.tableAllCheck)
                    })
                }
            },
            handleCommand(command) {
                let self = this;
                if (self.multipleSelection.length <= 0) {
             	   self.$message({
                        message: '请先选择要删除的数据',
                        type: 'waring',
                        duration: 1000,
                        customClass: 'message-center'
                    });
                    return;
                }
                var deleteuIds = [];
                for (let i in this.multipleSelection) {
             	   deleteuIds.push(this.multipleSelection[i].uuid);
                }
                
                $.ajax({
                    url: "/backstage/cms/noticetype/delete",
                    type: "POST",
                    data: JSON.stringify(deleteuIds),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode == "1") {
                     	   self.$message({
                                message: '删除成功',
                                type: 'success',
                                duration: 1000,
                                customClass: 'message-center'
                            });
                     	   self.queryNoticeType();
                        } else {
                     	   self.$message({
                                message: '删除失败',
                                type: 'error',
                                duration: 1000,
                                customClass: 'message-center'
                            });
                        }
                    }
                });
                
             },
            saveNoticeType: function () {
                let self = this;
                self.$refs['noticetype-form'].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: "/backstage/cms/noticetype/add",
                            type: "POST",
                            data: JSON.stringify(self.noticeType),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function (data) {
                                if (data && data.returnCode == "1") {
                                    self.$message({
                                        message: '新增公告类型成功',
                                        type: 'success',
                                        duration: 1000,
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = "/backstage/cms/noticetype/tolist"
                                        }
                                    });
                                } else {
                                    self.$message({
                                        message: '新增公告类型失败',
                                        type: 'error',
                                        customClass: 'message-center'
                                    });
                                }
                            },
                            error: function () {
                                self.$message({
                                    message: '系统异常，请联系管理员.',
                                    type: 'error',
                                    customClass: 'message-center'
                                });
                            }
                        });
                    }
                });
            },
            updateNoticeType: function () {
                var self = this;
                self.$refs['noticetype-form'].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: "/backstage/cms/noticetype/edit",
                            type: "POST",
                            data: JSON.stringify(self.noticeType),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function(data) {
                                if (data && data.returnCode == "1") {
                                    self.$message({
                                        message: '编辑公告类型成功',
                                        type: 'success',
                                        duration: 1000,
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = '/backstage/cms/noticetype/tolist';
                                        }
                                    });
                                } else {
                                    self.$message({
                                        message: '编辑公告类型失败',
                                        type: 'error',
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = '/backstage/cms/noticetype/tolist';
                                        }
                                    });
                                }
                            }
                        });
                    }
            });
            },
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.queryNoticeType();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.queryNoticeType();
            },
            handleCurrentTable: function (val) {
                window.location.href = 'edit.html?no=' + val.no;
            },
            queryNoticeType: function() {
                var self = this;
                var queryMessage = {
                    "queryPage": self.currentPage,
                    "pageShow": self.pageSize,
                    "queryParams": self.conditions,
                    "sortMap": {
                        "sortValue": "asc"
                    }
                };
                $.ajax({
                    url: "/backstage/cms/noticetype/list",
                    type: "POST",
                    data: JSON.stringify(queryMessage),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function(data) {
                        if (data && data.returnCode == "1") {
                            self.noticeTypeList = data.returnMessage;
                            self.totalNum = data.pager.totalNum;
                        }
                    }
                });
            },
            editDailog: function(uuid,typeName,sortValue){
                $("#addDialog").css('display','none');
                $("#editDialog").css('display','block');
                this.noticeType.uuid = uuid;
				this.noticeType.typeName = typeName;
				this.noticeType.sortValue = sortValue;
                this.dialogFormVisible = true;
            },
            showDailog: function () {
                $("#addDialog").css('display','block');
                $("#editDialog").css('display','none');
                this.dialogFormVisible = true;
            },
            //关闭弹框的事件
            closeDialog(){
                this.noticeType.typeName = '';//清空数据
                this.noticeType.sortValue = '';//清空数据
            },
            hideChoice: function () {
                this.showChoice = false;
            },
            handleDelete(position, row) {
                var self = this;
                this.$confirm('确认删除该条数据？')
                    .then(_ => {
                    $.ajax({
                    url: "/backstage/cms/noticetype/delete",
                    type: "POST",
                    data: JSON.stringify([row.uuid]),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode == "1") {
                            self.$alert('删除成功', {
                                confirmButtonText: '确定',
                                callback: action => {
                                window.location.href = "/backstage/cms/noticetype/tolist"
                        }
                        });
                        } else {
                            self.$alert('删除失败', {
                                confirmButtonText: '确定',
                                callback: action => {
                                window.location.href = "/backstage/cms/noticetype/tolist"
                        }
                        });
                        }
                    }
                });
            })
            }
        }
    });
</script>
</body>
</html>